<!-- eslint-disable -->
<template>
    <component
        v-if="render"
        :is="render({ model, getField, query })"
    />

    <slot
        v-else-if="type === 'slot'"
        :name="slotName"
    >
    </slot>

    <a-form-item
        v-else-if="type || renderField"
        :show-colon="colon"
        v-bind="formItemProps"
    >
        <component
            v-if="renderField"
            :is="renderField({ model, getField, query })"
        />

        <!-- 渲染a-form-item的slot -->
        <template
            v-for="(renderSlot, name) in formItemProps.slots"
            #[name]
        >
            <component :is="renderSlot(model)" />
        </template>
        <!-- 结束 -->

        <a-input
            v-if="type === 'input'"
            v-model="model[field]"
            v-bind="fieldProps"
        >
            <template
                v-for="(renderSlot, name) in fieldProps.slots"
                #[name]
            >
                <component :is="renderSlot(model)" />
            </template>
        </a-input>
        <a-input-search
            v-if="type === 'inputSearch'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-input-password
            v-if="type === 'inputPassword'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-select
            v-if="type === 'select'"
            :loading="loading"
            :options="options"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-switch
            v-if="type === 'switch'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-input-number
            v-if="type === 'inputNumber'"
            v-model="model[field]"
            v-bind="fieldProps"
        >
            <template
                v-for="(renderSlot, name) in fieldProps.slots"
                #[name]
            >
                <component :is="renderSlot(model)" />
            </template>
        </a-input-number>
        <a-color-picker
            v-if="type === 'colorPicker'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-checkbox
            v-if="type === 'checkbox'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-checkbox-group
            v-if="type === 'checkboxGroup'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-radio-group
            v-if="type === 'radioGroup'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-date-picker
            v-if="type === 'datePicker'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-time-picker
            v-if="type === 'timePicker'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-range-picker
            v-if="type === 'rangePicker'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-cascader
            v-if="type === 'cascader'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-input-tag
            v-if="type === 'inputTag'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-rate
            v-if="type === 'rate'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-slider
            v-if="type === 'slider'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-textarea
            v-if="type === 'textarea'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <a-tree-select
            v-if="type === 'treeSelect'"
            :loading="loading"
            v-model="model[field]"
            v-bind="fieldProps"
            :data="options"
        />
        <a-transfer
            v-if="type === 'transfer'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <c-range-picker
            v-if="type === 'cRangePicker'"
            v-model:start="model[field[0]]"
            v-model:end="model[field[1]]"
            v-bind="fieldProps"
        />
        <c-upload-img
            v-if="type === 'uploadImg'"
            v-model="model[field]"
            v-bind="fieldProps"
        />
        <RemoteSearchSelect
            v-if="type === 'remoteSearchSelect'"
            v-model="model[field]"
            :query="fieldItem.query"
            v-bind="fieldProps"
        />
    </a-form-item>
</template>

<script setup lang="tsx">
// @ts-nocheck
import { computed } from 'vue'
import useOptions from './useOptions'
import { isFunction } from 'lodash-es'
import CRangePicker from './CRangePicker.vue'
import RemoteSearchSelect from './RemoteSearchSelect.vue'

const { model, fieldItem, query, getField } = defineProps<{
    model: Record<string, any>
    fieldItem: FormFields[0]
    colon?: boolean
    query?: () => Promise<any>
    getField?: (name: string) => FormFields[0]
}>()

const { type, field, slotName, label, render, query: queryOptions, renderField } = fieldItem

/**
 * 设置表单项fieldProps
 */
const fieldProps = computed(() => {
    const tempFieldProps = fieldItem.fieldProps || {}
    return isFunction(tempFieldProps) ? tempFieldProps({ query, model, getField }) : tempFieldProps
})

/**
 * 设置表单项formItemProps
 */
const formItemProps = computed(() => {
    let tempFormItemProps = fieldItem.formItemProps || {}
    tempFormItemProps = isFunction(tempFormItemProps)
        ? tempFormItemProps({ query, model, getField })
        : tempFormItemProps
    if (field) tempFormItemProps.field = field.toString()
    if (label) tempFormItemProps.label = label.toString()
    return tempFormItemProps
})

/**
 * 设置异步获取表单项的
 */
const { options, loading } = useOptions(queryOptions)
</script>
